import { useEffect, useState } from 'react';
import { useHistory } from 'umi';
import opens from '@/config/vedios/opens.mp4';
import closes from '@/config/vedios/closes.mp4';
import './index.less';

const index = ({ children }: { children: any }) => {
  const history = useHistory();
  const [source, setSource] = useState(opens);
  const [isShow, setIsShow] = useState('true');
  useEffect(() => {
    history.listen(({ url, action }) => {
      setSource(opens);
      setIsShow(true);
    });

    return () => {
      setSource(closes);
      setIsShow(true);
    };
  }, [history]);
  const Player = () => {
    return (
      <video
        className="myVideo"
        width="100%"
        height="100%"
        muted
        autoPlay
        onEnded={() => {
          setIsShow(false);
        }}
        style={{
          display: isShow ? 'block' : 'none',
        }}
      >
        <source src={source} type="video/mp4" />
      </video>
    );
  };
  return (
    <div className="index-page-content">
      <Player />
      <div
        className="children"
        style={{
          display: isShow ? 'none' : 'block',
        }}
      >
        {children}
      </div>
    </div>
  );
};

export default index;
